<style scoped >
 .number {
  display: inline-block;
  margin-bottom: 10px;
  text-align: center;
}
ul {
  display: inline-block;
  text-align: center;
  list-style: none;
}
li {
  float: left;
  text-align: center;
  margin: 0;
}
.dataBoc {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tt span {
  width: 100%;
  height: 100%;
  float: left;
  text-align: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
<template style="display: inline-block;">
  <div class="number">
    <ul ref="dataNums" :style="{ height: (this.option.height || 40) + 'px' }">
      <li v-for="(item, index) in list" :key="index" :style="numBoxStyle">
        <div class="dataBoc">
          <div
            class="tt"
            :style="{
              transition: 'all ' + scrollSpeed + 's ease-in-out 0s',
              top: '-' + item.top + 'px',
            }"
          >
            <span
              v-for="(item2, index2) in numList"
              :key="index2"
              :style="numStyle"
              >{{ item2 }}</span
            >
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "ScrollNumbers",
  props: {
    num: Number | String,
    option: Object,
  },
  data() {
    return {
      scrollTimer: null,
      list: [],
      //   numList: [0,1,2,3,4,5,6,7,8,9,"."],
      numList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
  computed: {
    numBoxStyle() {
      return {
        width: (this.option.width || 20) + "px",
        height: (this.option.height || 40) + "px",
        lineHeight: (this.option.height || 40) + "px",
        fontSize: (this.option.fontSize || 20) + "px",
        marginLeft: (this.option.margin || 4) + "px",
        marginRight: (this.option.margin || 4) + "px",
      };
    },
    numStyle() {
      return {
        background: this.option.background || "transparent",
        color: this.option.color || "#fff",
        borderRadius: (this.option.borderRadius || 0) + "px",
        fontWeight: this.option.bold ? "bold" : "normal",
      };
    },
    scrollSpeed() {
      return this.option.scrollSpeed || 0.5;
    },
    number() {
      return this.num;
    },
  },
  methods: {
    init() {
      this.scroll();
    },
    scroll() {
      this.list = (this.num+'').split("");
      let arr = [];
      this.list = this.list.map((item) => {
        return {
          num: item - 0,
          top: 0,
        };
      });
      let Hei = this.option.height || 40;
      this.list.forEach((item, index) => {
        let sNum = item.num - 0;
        if(sNum == 0){
          sNum = 10
        }
        item.top = parseFloat((sNum - 1) * Hei);
      });
    },
    updateScroll(val, oldVal) {
      if(oldVal == 0){
        this.init();
        return;
      }
      let Hei = this.option.height || 40;
      var newArr = (val+'').split(''),scrollArr = [];
      if(newArr.length > this.list.length){
        for(let i=0;i<newArr.length - this.list.length;i++){
          this.list.unshift({
            num:1,
            top:0
          })
        }
        
      }
      let i = newArr.length-1,that=this;
      while(i>=0){
        let num = newArr[i]-0,oldNum = that.list[i].num;
        let remainNum = num - oldNum;
         that.list[i].num = num;
        if(remainNum >= 0){
          that.list[i].top += Hei*remainNum
        }else{
          if(num == 0){
            num = 10;
          }
          that.list[i].top = (Hei*(num-1))
        }
        i--;
      }
      
    },
  },
  mounted() {
    this.init();
  },
  watch: {
    "option.scrollSpeed": {
      handler(val, oldval) {
        if (val) {
          this.init();
        }
      },
      deep: true,
    },
    num(val, oldVal) {
      this.updateScroll(val, oldVal);
    },
  },
  
};
</script>